<template>
  <div class="innerPage" v-if="falg">
    <!-- @click="GoInner(listItem[0].purchaseId)" -->
    <div class="inner-img">
      <div class="img-bg" :style="'background-image:url(' + Contentlist.collection.cover + ') '"
        v-if="VideoIndexOf(Contentlist.collection.cover)">
      </div>
      <vdeo :collection="Contentlist.collection.cover" v-else />
    </div>
    <div class="bottom-bg"></div>
    <van-row justify="center">
      <van-col span="24" class="inner-title">
        <h1>{{ Contentlist.collection.name }}</h1>
      </van-col>
      <van-col>
        <p class="linercolor">{{ Contentlist.collection.code }}</p>
      </van-col>
      <van-col span="24" class="inner-title">
        <div class="Limit-warp">
          <span>限量</span>
          <span>{{ Contentlist.collection.totalNumber ? Contentlist.collection.totalNumber : "0" }}份</span>
        </div>
        <div class="Limit-warp">
          <span>剩余</span>
          <span>{{ Contentlist.collection.surplusNumber ? Contentlist.collection.surplusNumber : "0" }}份</span>
        </div>
      </van-col>
    </van-row>
    <div class="warp">
      <!-- 截止时间：{{Contentlist.endTime}} -->
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in listItem" :key="index">
        <div class="img-warp" @click="GoInner(item.purchaseId)">
          <img :src="item.cover" alt="" v-if="VideoIndexOf(item.cover)">
          <vdeo :collection="item.cover" v-else />
        </div>
        <div class="left" @click="GoInner(item.purchaseId)">
          <p>{{ item.name }}</p>
          <span>数量：<strong>{{ item.loginUserSynthesisCount }}</strong>/{{ item.needSynthesisCount }}</span>
        </div>
      </div>
      <p>集齐以上藏品即可合成指定藏品</p>
    </div>
    <div class="footer">
      <van-button type="primary" class="hechegn" @click="Synthesis">立即合成</van-button>
    </div>
  </div>
</template>
<script>
import { reactive, computed, onMounted, defineComponent, onBeforeMount, ref, watch } from 'vue'
import Clipboard from 'clipboard';
import useClipboard from 'vue-clipboard3'
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import Pwdwarp from "@/components/pwd.vue";
import { synthesisgetInfo, drawIpage, needSynthesisList, immediatelySynthesis } from "@/api/public";
import { Toast, ImagePreview } from "vant";
import { VideoIndexOf } from "@/utils/phone";
import vdeo from "@/components/video.vue";
export default {
  components: {
    Pwdwarp, vdeo
  },

  setup(props) {
    const store = useStore();
    const router = useRouter()
    const popupshow = ref(false)
    const { toClipboard } = useClipboard()
    const Contentlist = ref({})
    const GoInner = (id) => {
      router.push({
        path: '/pageInner',
        query: {
          id: id
        }
      })
    }
    const falg = ref(false)
    const Synthesis = () => {
      const data = { synthesisCollectionId: router.currentRoute.value.query.id }
      immediatelySynthesis(data).then(res => {
        console.log(res)
        if (res.data.success) {
          Toast('合成成功')
          onLoad()
        } else {
          Toast(res.data.message)
        }
      })
    }
    const onLoad = async () => {
      // Toast.loading({
      //   message: '数据加载中...',
      //   forbidClick: true,
      // });

      const data = { synthesisCollectionId: router.currentRoute.value.query.id }
      const res = await synthesisgetInfo(data)
      if (res.data.success) {
        falg.value = true
        Toast.clear()
        Contentlist.value = res.data.data
        console.log(Contentlist.value)
      }
      needSynthesisList(data).then(res => {
        listItem.value = res.data.data
      })

    }
    const listItem = ref([])
    const loading = ref(false)
    const look = async () => {
      loading.value = true
      popupshow.value = true
    }
    const Join = () => {
      const data = {
        collectionId: router.currentRoute.value.query.id
      }
      participateDraw(data).then(res => {
        if (res.data.success) {
          Toast(res.data.message)
          onload()
        }
      })

    }

    onMounted(() => {
      onLoad()

      const data = { id: router.currentRoute.value.query.id }
    })
    return {
      Contentlist, onLoad, Join, look, loading, listItem, Synthesis, VideoIndexOf, GoInner, falg
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  background: #282a2c;
  border-radius: 20px;
  padding: 20px 10px;
  margin: 50px 20px;

  p {
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: 300;
    color: #b9c4c7;
    text-align: center;
  }

  .item {
    display: flex;
    margin-bottom: 60px;
    align-items: center;

    .img-warp {
      overflow: hidden;
      width: 200px;
      height: 200px;
      background: linear-gradient(0deg, #161718, #4b4c4d);
      border: 2px solid #ffffff;
      border-radius: 20px;

      img {
        width: 100%;
      }
    }

    .left {
      margin-left: 40px;
    }

    p {
      font-size: 32px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
    }

    span {
      display: block;
      margin-top: 20px;
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #b9c4c7;

      strong {
        color: #fb0000;
      }
    }
  }
}

.linercolor {
  font-size: 36px;
  width: fit-content;
  margin: 0px auto 20px;
  display: block;
}

.linear {
  text-align: center;
  font-size: 36px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #f8f8f8;
  line-height: 63px;
  background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.warp {
  font-size: 24px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #f8f8f8;
  text-align: center;
}

.innerPage {
  padding-bottom: 148px;

  .inner-img {
    width: 648px;
    height: 648px;
    background: linear-gradient(0deg, #161718, #4b4c4d);
    border: 1px solid #ffffff;
    border-radius: 80px;
    margin: 80px auto 20px;
    overflow: hidden;

    .img-bg {
      width: 648px;
      height: 648px;
      background-size: contain;
      // margin: 100px auto;
      background-position: center center;
      position: relative;
      background-repeat: no-repeat;
    }
  }

  .bottom-bg {
    background: url('../../../assets/image/bottom.png');
    width: 660px;
    height: 220px;
    background-size: cover;
    margin: 0px auto;
  }

  .inner-title {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    h1 {
      font-size: 46px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #f8f8f8;
      line-height: 103px;
      margin: 0px;
    }
  }

  .Limit-warp {
    margin-right: 20px;

    span {
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 48px;
    }

    span:nth-child(1) {
      color: #444442;
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      background: #f3e3bb;
      border-radius: 4px 0px 0px 4px;
      padding: 3px 12px;
    }

    span:nth-child(2) {
      padding: 3px 12px;
      background: #444442;
      border-radius: 4px;
      font-size: 26px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #f3e3bb;
      line-height: 48px;
    }
  }

  .footer {
    padding: 20px 0px;
    width: 750px;
    background: linear-gradient(0deg, #0e1011, #222222);
    position: fixed;
    bottom: 0px;
    z-index: 999;
    display: flex;
    align-items: center;

    .hechegn {
      font-size: 32px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #ffffff;
      border: none;
      width: 680px;
      height: 88px;
      background: linear-gradient(-90deg, #37dc6d, #34d1f9);
      border-radius: 44px;
      margin: 0 auto;
    }
  }
}
</style>